<template>
  <div>
    <div>
      <van-nav-bar fixed>
        <template #left>
          <img class="logo" src="@/assets/toutiao_logo.png" alt="" />
        </template>
        <template #right>
          <van-icon name="search" size="0.48rem" color="#fff" @click="moveSearchFn"/>
        </template>
      </van-nav-bar>
      <van-icon
        name="plus"
        size="0.37333334rem"
        class="moreChannels"
        @click="show = true"
      />
    </div>
    <div class="main">
      <van-tabs @change="tabBeforeChangeFn" v-model="active" sticky animated offset-top="1.226667rem">
        <van-tab
          :title="obj.name"
          v-for="obj in UserChannels"
          :key="obj.id"
          :name="obj.id"
        >
          <ArticleList :channelId="active"></ArticleList>
        </van-tab>
      </van-tabs>
    </div>
    <van-popup
      class="chanel_popup edit_wrap"
      v-model="show"
      get-container="body"
    >
      <channelEdit
      @close="show = false"
      :userList="UserChannels"
      :unChannelList="unCheckChannelList"
      @addChannelEV="addChannelFn"
      @removeChannelEV="removeChannelFn"
      @changeChannel="channgeChannelFn"
      ></channelEdit>
    </van-popup>
  </div>
</template>

<script>
import { getUserChannelsAPI, getAllChannelsAPI, updataChannelsAPI, removeTheChannelAPI } from '@/api'
import ArticleList from './components/ArticleList.vue'
import channelEdit from './ChannelEdit.vue'
export default {
  data () {
    return {
      active: 0, // 激活频道
      UserChannels: [], // 用户选择频道列表
      allChannelList: [], // 所有频道列表
      show: false,
      channelScrollObj: {} // 保存每个频道的滚动位置
    }
  },
  async created () {
    // 频道列表
    const res = await getUserChannelsAPI()
    // console.log(res)
    this.UserChannels = res.data.data.channels

    const res2 = await getAllChannelsAPI()
    // console.log(res2)
    this.allChannelList = res2.data.data.channels
    // console.log(this.unCheckChannelList)
  },
  components: {
    ArticleList,
    channelEdit
  },
  computed: {
    unCheckChannelList () {
      // 目标:把所有频道数组挨个对象取出,去用户己选频道数组里查找,如果找不到,则让filter方法取到新数组
      const newArr = this.allChannelList.filter((bigObj) => {
        const index = this.UserChannels.findIndex((smallObj) => {
          return smallObj.id === bigObj.id
        })
        if (index > -1) {
          return false
        } else {
          return true
        }
      })
      return newArr
    }
  },
  activated () {
    console.log(this.$route)
    window.addEventListener('scroll', this.scrollFn)
    document.documentElement.scrollTop = this.$route.meta.scrollT
  },
  deactivated () {
    window.removeEventListener('scroll', this.scrollFn)
  },
  methods: {
    scrollFn () {
      this.$route.meta.scrollT = document.documentElement.scrollTop
      this.channelScrollObj[this.active] = document.documentElement.scrollTop
      // console.log(this.channelScrollObj)
    },
    // 添加频道
    async addChannelFn (channelObj) {
      this.UserChannels.push(channelObj)
      const newArr = this.UserChannels.filter(obj => obj.id !== 0)
      const theNewArr = newArr.map((obj, index) => {
        const newObj = { ...obj }
        delete newObj.name
        newObj.seq = index
        return newObj
      })
      await updataChannelsAPI({
        channels: theNewArr
      })
    },
    // 删除频道
    async removeChannelFn (channelObj) {
      const index = this.UserChannels.findIndex(obj => obj.id === channelObj.id)
      this.UserChannels.splice(index, 1)
      await removeTheChannelAPI({
        channelId: channelObj.id
      })
    },
    // 切换频道
    channgeChannelFn (obj) {
      this.active = obj.id // 传过来的频道ID, 影响tabs默认v-model的选择
    },
    moveSearchFn () {
      this.$router.push('/search')
    },
    tabBeforeChangeFn () {
      // tab切换后,设置滚动条位置
      this.$nextTick(() => {
        document.documentElement.scrollTop = this.channelScrollObj[this.active]
      })
    }
  }
}
</script>

<style scoped lang="less">
.van-nav-bar {
  background: #006bff;
}
.logo {
  height: 30px;
  width: 100px;
}
/* tab内容距离tab导航的距离 */
.main {
  padding-top: 44px;
}
// 设置 tabs 容器的样式
/deep/ .van-tabs__wrap {
  padding-right: 30px;
  background-color: #fff;
}

// 设置小图标的样式
.moreChannels {
  position: fixed;
  top: 62px;
  right: 8px;
  z-index: 999;
}
.edit_wrap {
  width: 100%;
  height: 100%;
}
</style>
